
var jckChart;
var returnJckData = [];

var jcgObj = new Vue({
	el: '#jckTab',
	data: {
		year: '',
		isAll: false,
		zsList:{
	        ckjcg: true,
	        ckwxpcb: false,
	        ckxbkc: false
	        /*ckxbjtc: false,
	        ckdbggc: false*/
		},
		tbList: {
	        ckjcgtb: true,
	        ckwxpcbtb: false,
	        ckxbkctb: false
	        /*ckxbjtctb: false,
	        ckdbggctb: false*/
		},
		hbList: {
	        ckjcghb: true,
	        ckwxpcbhb: false,
	        ckxbkchb: false
	        /*ckxbjtchb: false,
	        ckdbggchb: false*/
		}
	},
	created: function(){
		

	},
	watch:{
		"zsList.ckjcg":function(val, oldVal){	//进出港
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		"tbList.ckjcgtb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		/*"hbList.ckjcghb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		},*/
		"zsList.ckwxpcb":function(val, oldVal){	//危险品船
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		"tbList.ckwxpcbtb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		/*"hbList.ckwxpcbhb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		},*/
		"zsList.ckxbkc":function(val, oldVal){	//西部客船
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		"tbList.ckxbkctb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		}/*,
		"hbList.ckxbkchb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		}*//*,
		"zsList.ckxbjtc":function(val, oldVal){	//西部交通船
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		"tbList.ckxbjtctb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		"hbList.ckxbjtchb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		"zsList.ckdbggc":function(val, oldVal){	//东部观光船
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		"tbList.ckdbggctb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		},
		"hbList.ckdbggchb":function(val, oldVal){
    		jckChart.setOption(subStrOption(returnJckData),true)
		}*/
	},
	methods:{
		checkAll: function(){
			this.zsList.ckjcg = this.isAll;
			this.zsList.ckwxpcb　= this.isAll;
			this.zsList.ckxbkc　= this.isAll;
			/*this.zsList.ckxbjtc　= this.isAll;
			this.zsList.ckdbggc　= this.isAll;*/
			
			this.tbList.ckjcgtb　= this.isAll;
			this.tbList.ckwxpcbtb　= this.isAll;
			this.tbList.ckxbkctb　= this.isAll;
			/*this.tbList.ckxbjtctb　= this.isAll;
			this.tbList.ckdbggctb　= this.isAll;*/
			
			/*this.hbList.ckjcghb　= this.isAll;
			this.hbList.ckwxpcbhb　= this.isAll;
			this.hbList.ckxbkchb　= this.isAll;*/
			/*this.hbList.ckxbjtchb　= this.isAll;
			this.hbList.ckdbggchb　= this.isAll;*/

    		jckChart.setOption(subStrOption(returnJckData),true)
		}
	}
})

$(function(){
	
	
	 //$('#tjObjselect').click(function(){jcgObj.year =$("#tjObjselect option:selected").text();});
	
	jcgObj.year =new Date().getFullYear();
	
	bindJckData();
	
})
function searchOrTimejck(){
	if($('#time').val()==""){
		jcgObj.year =new Date().getFullYear();
	}
	else{
	jcgObj.year =$('#time').val();}
	bindJckData();
}
function bindJckData(){
	$.ajax({ 
		type: "POST",
		url: "/tszt/findsjfb.jspx", 
		data: {channelIds: 365, year: jcgObj.year, orderBy: 36},
		success: function(data){
			if(data.code == 200){
				
				if(data.body.length == 0){
					
					jcgObj.year = new Date().getFullYear() - 1;
					bindJckData();
				}
				returnJckData = data.body;
			}

			bindJck(returnJckData);//进出港图表初始化
      	}
	});
}

function subStrLegendJck(){
	var legend = [];

	if(jcgObj.zsList.ckjcg)
		legend.push('进出港总数');
	if(jcgObj.zsList.ckwxpcb)
		legend.push('危险品船');
    if(jcgObj.zsList.ckxbkc)
		legend.push('客船');
    /*if(jcgObj.zsList.ckxbjtc)
		legend.push('西部交通船');
    if(jcgObj.zsList.ckdbggc)
		legend.push('东部观光船');*/
	return legend;
}

function subStrXAxis(returnJckData){
	var xAxis = [];
	if(returnJckData.length<12){
		xAxis=['1月份','2月份','3月份','4月份','5月份','6月份','7月份','8月份','9月份','10月份','11月份','12月份'];
	}
	else{
	returnJckData.forEach(function(month){ 
		xAxis.push(month.attr_month + '月份');
	}); 
	}
	return xAxis;
}


function subStrSeries(returnJckData){
	var series = [];

	var jcgData = [];
	var jcgDataTb = [];
	var jcgDataHb = [];

	var ckwxpcbData = [];
	var ckwxpcbDataTb = [];
	var ckwxpcbDataHb = [];

	var ckxbkcData = [];
	var ckxbkcDataTb = [];
	var ckxbkcDataHb = [];

	/*var ckxbjtcData = [];
	var ckxbjtcDataTb = [];
	var ckxbjtcDataHb = [];

	var ckdbggcData = [];
	var ckdbggcDataTb = [];
	var ckdbggcDataHb = [];*/

	returnJckData.forEach(function(val){ 
		//船舶进出港
		jcgData.push(val.attr_jcg); //总数
		jcgDataTb.push(val.attr_jcgtb);	//同比
		jcgDataHb.push(val.attr_jcghb);//环比
		//危险品船
		ckwxpcbData.push(val.attr_wxpcb); //总数
		ckwxpcbDataTb.push(val.attr_wxpcbtb);	//同比
		ckwxpcbDataHb.push(val.attr_wxpcbhb);//环比
		//西部客船
		ckxbkcData.push(val.attr_xbkc); //总数
		ckxbkcDataTb.push(val.attr_xbkctb);	//同比
		ckxbkcDataHb.push(val.attr_xbkchb);//环比
		//西部交通船
		/*ckxbjtcData.push(val.attr_xbjtc); //总数
		ckxbjtcDataTb.push(val.attr_xbjtctb);	//同比
		ckxbjtcDataHb.push(val.attr_xbjtchb);//环比
		//东部观光船
		ckdbggcData.push(val.attr_dbggc); //总数
		ckdbggcDataTb.push(val.attr_dbggctb);	//同比
		ckdbggcDataHb.push(val.attr_dbggchb);//环比
*/	}); 
	

	if(jcgObj.zsList.ckjcg){	//进出港总数
	    var d = 
		{
            name: '进出港总数',
            type: 'bar',
            itemStyle: {
                normal: {
					color: "#0099CC",
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            },
            data: jcgData
        };
	    series.push(d);
	}

	if(jcgObj.tbList.ckjcgtb){	//进出港总数同比
		var d = 
      	{
             name: '进出港总数同比',
             type: 'line',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
					 color: "#CC00CC",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: jcgDataTb
        };

	    series.push(d);
	}


	/*if(jcgObj.hbList.ckjcghb){	//进出港总数环比
		var d = 
      	{
             name: '进出港总数环比',
             type: 'scatter',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#CC3300",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: jcgDataHb
        };

	    series.push(d);
	}*/

	if(jcgObj.zsList.ckwxpcb){	//危险品船
	    var d = 
		{
            name: '危险品船',
            type: 'bar',
            itemStyle: {
                normal: {
					color: "#33CCCC",
                    label: {
                    	show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            },
            data: ckwxpcbData
        };
	    series.push(d);
	}

	if(jcgObj.tbList.ckwxpcbtb){	//危险品船同比
		var d = 
      	{
             name: '危险品船同比',
             type: 'line',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#d9534f",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: ckwxpcbDataTb
        };

	    series.push(d);
	}


	/*if(jcgObj.hbList.ckwxpcbhb){	//危险品船环比
		var d = 
      	{
             name: '危险品船环比',
             type: 'scatter',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#333300",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: ckwxpcbDataHb
        };

	    series.push(d);
	}*/

	if(jcgObj.zsList.ckxbkc){	//西部客船
	    var d = 
		{
            name: '客船',
            type: 'bar',
            itemStyle: {
                normal: {
					color: "#5cb85c",
                    label: {
                    	show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            },
            data: ckxbkcData
        };
	    series.push(d);
	}

	if(jcgObj.tbList.ckxbkctb){	//西部客船同比
		var d = 
      	{
             name: '西部客船同比',
             type: 'line',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#5cb85c",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: ckxbkcDataTb
        };

	    series.push(d);
	}


	/*if(jcgObj.hbList.ckxbkchb){	//西部客船环比
		var d = 
      	{
             name: '西部客船环比',
             type: 'scatter',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#137a13",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: ckxbkcDataHb
        };

	    series.push(d);
	}*/

	/*if(jcgObj.zsList.ckxbjtc){	//西部交通船
	    var d = 
		{
            name: '西部交通船',
            type: 'bar',
            itemStyle: {
                normal: {
					color: "#0078c1",
                    label: {
                    	show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            },
            data: ckxbjtcData
        };
	    series.push(d);
	}

	if(jcgObj.tbList.ckxbjtctb){	//西部交通船同比
		var d = 
      	{
             name: '西部交通船同比',
             type: 'line',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#0078c1",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: ckxbjtcDataTb
        };

	    series.push(d);
	}


	if(jcgObj.hbList.ckxbjtcjb){	//西部交通船环比
		var d = 
      	{
             name: '西部交通船环比',
             type: 'scatter',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#0078c1",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: ckxbjtcDataHb
        };

	    series.push(d);
	}

	if(jcgObj.zsList.ckdbggc){	//东部观光船
	    var d = 
		{
            name: '东部观光船',
            type: 'bar',
            itemStyle: {
                normal: {
					color: "#0033FF",
                    label: {
                    	show: true,
                        position: 'top',
                        formatter: '{c}'
                    }
                }
            },
            data: ckdbggcData
        };
	    series.push(d);
	}

	if(jcgObj.tbList.ckdbggctb){	//东部观光船同比
		var d = 
      	{
             name: '东部观光船同比',
             type: 'line',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#f0ad4e",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: ckdbggcDataTb
        };

	    series.push(d);
	}


	if(jcgObj.hbList.ckdbggchb){	//东部观光船环比
		var d = 
      	{
             name: '东部观光船环比',
             type: 'scatter',
             yAxisIndex: 1,
             itemStyle: {
                 normal: {
						color: "#f0ad4e",
                     label: {
                         show: true,
                         position: 'top',
                         formatter: '{c}%'
                     }
                 }
             },
             data: ckdbggcDataHb
        };

	    series.push(d);
	}*/

	return series;
}

function subStrOption(){

	var legendData = subStrLegendJck();
	var xAxisData = subStrXAxis(returnJckData);
	var seriesData = subStrSeries(returnJckData);

    var option = {
    		toolbox: {
    			　　show: true,
    			   right: 20,     			  
    			　　feature: {
    			　　　　saveAsImage: {
    			　　　　show:true,
    			　　　　excludeComponents :['toolbox'],
    			　　　　pixelRatio: 2,
    			  itemStyle: {
    	                color: '#254065'
    	            }
    			　　　　}
    			　　}
    			},
    		title: {
    			text: jcgObj.year + '年'
    		},	
    		
    		 tooltip: {
    			 
              	trigger: 'axis',
              	 axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'line'        //指示器类型。
                  },
                  formatter: function (params) {//提示框自定义
                      return formatterTip(params);
                  },
                 
     		 },

            legend: {
                data: legendData,
                textStyle: {
                    color: '#A7A7A7',
                },
            },
          
            xAxis: {
                data: xAxisData
            },
            
            yAxis: [
            	{
                    type: 'value',
                    name: '总数'
                },
                {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        interval: 'auto',
                        formatter: '{value}%'
                    },
                    name: '百分比%'
                }
            ],
        
           series: seriesData
		};
    
    
    return option;
}


//进出港图表初始化
function bindJck(returnJckData){

	jckChart = echarts.init(document.getElementById('chartjck'));

    var option = subStrOption(returnJckData);
	
    // 使用刚指定的配置项和数据显示图表。
    jckChart.setOption(option);
}